<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      @row-click="row_click"
    >
      <el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="(item,index) in type" :key="index"/>
    </el-table>
  </template>
  <script lang="ts" setup>
  import { defineProps,computed, ComputedRef } from "vue";
  interface inter_type{
    prop:String,
    label:String,
    width?:String
  }
  let prop = defineProps({
    data:Array<Object>,
    type:Array<inter_type>
  });
  let tableData:ComputedRef<Array<Object>> = computed(()=>{
    return prop.data || [];
  });
  let type:ComputedRef<Array<inter_type>> =computed(()=>{
    return prop.type || [];
  })
  function row_click(column:any){
    console.log(column);
  }
  const tableRowClassName = ({
    rowIndex,
  }: {
    rowIndex: number
  }) => {
    if (rowIndex % 2 == 0) {
      return 'grey-row'
    }
    return ''
  }
  </script>
  <style>
  .el-table .grey-row {
    --el-table-tr-bg-color: rgb(211, 253, 255);
  }
  </style>
  